<template>
	<view class="content">
		<view class="ysxx">
			<view class="header">
				<image v-if="doctorInfo.avatar" :src="doctorInfo.avatar" mode="aspectFill"></image>
				<image v-else src="@/static/images/f.png" mode="aspectFill"></image>
				<view class="ysmz">{{doctorInfo.name}}</view>
				<view class="zhpf">
					<!-- <view class="title">综合评分</view> -->
					<view class="xingji">
						<uni-rate :touchable="false" :readonly="true" :size="20" :margin="5" :value="doctorInfo.score"
							color="#d9d9d9" active-color="#ff6a00" />
						<view class="txt">{{doctorInfo.score}}分</view>
					</view>
				</view>

				<view class="header-text1">
					<!-- 职称 -->
					<view class="">{{doctorInfo.chief}}</view>
					<text class="expert" v-if="doctorInfo.is_expert == 1">专家</text>

					<view class="ysxx-gzys" @click="clickFollow">
						<text class="iconfont icon-jiahao"></text>
						<view v-if="is_follow == 0">关注医生</view>
						<view v-else>已关注</view>
					</view>
				</view>

				<view class="header-text2">
					<view class="hpl">
						好评率
						<text>{{getRate(doctorInfo.positive_rating)}}</text>
					</view>
					<view class="wzl">
						问诊量
						<text>{{doctorInfo.inquiry_count}}</text>
					</view>
				</view>
			</view>
			<view class="ysxx-content">
				<!-- 描述 -->
				<view class="c-des">{{doctorInfo.desc}}</view>
				<!-- 特长 -->
				<view>擅长：{{doctorInfo.good_at}}</view>
			</view>

		</view>
		<!-- <view class="service-content">
			<view class="title">服务内容</view>
			<view class="service-zt">
				<view class="zxzx" @click="clickChat">
					<view class="zxzx-img">
						<image :src="chatImg" mode="aspectFill"></image>
					</view>
					<view class="zxzx-font">
						在线咨询
						<text>{{doctorInfo.money_chat}}元/次</text>
					</view>
				</view>
				<view class="twwz" @click="clickPicTxt">
					<view class="twwz-img">
						<image :src="picTxt" mode="aspectFill"></image>
					</view>
					<view class="twwz-font">
						图文问诊
						<text>{{doctorInfo.money_pic}}元/次</text>
					</view>
				</view>
			</view>
		</view> -->
		<view class="service-box">
			<view class="title">服务内容</view>

			<view class="content-box">
				<view class="des">{{header_title}}</view>

				<inquiry-type ref="chatRef" :source="3" :itemData="chat_info" @changeType="chatChange"></inquiry-type>

				<inquiry-type ref="audioRef" :source="4" :itemData="audio_info" @changeType="audioChange"></inquiry-type>

				<inquiry-type ref="picRef" :source="5" :itemData="pic_info" @changeType="picChange"></inquiry-type>
			</view>
		</view>
		<view class="safe-height"></view>
		<view class="footer safe-height">
			<view class="btn-box">
				<view class="btn" @click="startInquiry">立即问诊</view>
			</view>
			<view class="yy-safe-bh"></view>
		</view>
		
		<!-- 视频问诊提示 -->
		<ask-alert :popupShow="videoPopShow" :price="money_audio" @closeAlertPop="closeAlertPop" @alertGoNext="alertGoNext"></ask-alert>
		
		
	</view>

</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import {
		getDoctorDetail,
		doctorFollow
	} from '@/api/inquiry.js';
	import inquiryType from './components/inquiryType.vue';
	import askAlert from './components/askAlert.vue';
	export default {
		computed: {
			...mapGetters(['isLogin', 'viewColor', 'uid','routeError']),
		},
		components: {
			inquiryType,
			askAlert,
		},
		data() {
			return {
				doctor_id: '',
				chatImg: HTTP_REQUEST_URL + '/uni_static/i/i_chat.png',
				picTxt: HTTP_REQUEST_URL + '/uni_static/i/i_ask.png',
				doctorInfo: {
					'avatar': ''
				},
				is_follow: 0,
				header_title:null,
				chat_info: null,
				audio_info: null,
				pic_info: null,
				selType: -1, // 1:在线、2：音视频、3：图文,
				videoPopShow:false,
				
				money_audio:0,
				can_audio:0,

			}
		},
		onLoad(ops) {
			if(this.routeError) {
				this.$store.commit('GO_ERROR');
				return
			}
			if (!ops || !ops.doctor_id) {
				return this.$util.Tips({
					title: '缺少参数',
				})
			}
			this.doctor_id = ops.doctor_id;
		},
		onShow() {
			this.getDoctorDetial();
		},
		methods: {
			getRate(val) {
				if (val > 1) {
					return String(val) + '%';
				}
				return String(val * 100) + '%';
			},
			/**
			 * 获取医生资料
			 */
			getDoctorDetial() {
				let where = {
					'id': this.doctor_id,
					'uid': this.uid,
				}
				getDoctorDetail(where).then(res => {
					this.doctorInfo = res.data;
					this.header_title = res.data.header_title;
					this.chat_info = res.data.chat_info;
					this.chat_info.doctor_id = this.doctor_id;
					this.audio_info = res.data.audio_info;
					this.audio_info.doctor_id = this.doctor_id;
					this.pic_info = res.data.pic_info;
					this.pic_info.doctor_id = this.doctor_id;
					this.is_follow = this.doctorInfo.is_follow;
					this.money_audio = res.data.money_audio;
					this.can_audio = res.data.can_audio;
				});
			},
			/**
			 * 关注-取消关注
			 */
			clickFollow() {
				let that = this;
				let where = {
					'doctor_id': this.doctor_id,
					'uid': this.uid
				}
				doctorFollow(where).then(res => {
					//console.log('rk==>[res]'+JSON.stringify(res));
					if (res.status == 200) {
						this.is_follow = !this.is_follow;
						// this.doctorFollow.is_follow = this.is_follow;
						let dPost = {
							'id': this.doctor_id,
							'is_follow': this.is_follow,
						}
						uni.$emit('yy_ctr_follow', dPost);
					}
					that.$util.Tips({
						title: res.message
					});
				});
			},

			/**
			 * 选择方式
			 */
			chatChange(val) {
				if (val > 0) {
					this.selType = 1;
				} else {
					this.selType = -1;
				}
				this.$refs.audioRef.clearVal();
				this.$refs.picRef.clearVal();
			},
			audioChange(val) {
				if (val > 0) {
					this.selType = 2;
				} else {
					this.selType = -1;
				}
				this.$refs.chatRef.clearVal();
				this.$refs.picRef.clearVal();
			},
			picChange(val) {
				if (val > 0) {
					this.selType = 3;
				} else {
					this.selType = -1;
				}
				this.$refs.chatRef.clearVal();
				this.$refs.audioRef.clearVal();
			},

			startInquiry() {
				// 医生、医助无法发起问诊
				if(this.doctorInfo.is_inquiry == 1){
					return this.$util.Tips({
						title: this.doctorInfo.is_inquiry_msg
					});
				}
				
				if (this.selType == -1) {
					return this.$util.Tips({
						title: '请选择问诊方式'
					});
				}else if(this.selType == 1){
					this.clickChat();
				}else if(this.selType == 2){
					// return this.$util.Tips({
					// 	title: '敬请期待'
					// });
					
					if(this.can_audio != 0){
						this.videoPopShow = true;
					}else {
						return this.$util.Tips({
							title: '音视频问诊暂未开启'
						});
					}
					
				}else if(this.selType == 3){
					this.clickPicTxt();
				}
			},
			
			/**
			 * 问诊
			 */
			clickChat() {
				uni.navigateTo({
					url: '/pages/shops/subs_inquiry/onlinechat/index?doctor_id=' + this.doctor_id + '&price=' +
						this.doctorInfo.money_chat + '&mer_id=' + this.doctorInfo.mer_id,
				})
			},
			/**
			 * 图文
			 */
			clickPicTxt() {
				uni.navigateTo({
					url: '/pages/shops/subs_inquiry/picture_text/index?doctor_id=' 
					+ this.doctor_id 
					+ '&price=' + this.doctorInfo.money_pic 
					+ '&mer_id=' + this.doctorInfo.mer_id
					+ '&selType=' + this.selType,
				})
			},
			/**
			 * 视频
			 */
			closeAlertPop(){
				this.videoPopShow = false;
			},
			alertGoNext(){
				this.videoPopShow = false;
				uni.navigateTo({
					url:'/pages/shops/subs_inquiry/time_select/timeSelect?id='
					+this.doctor_id
					+ '&price=' + this.doctorInfo.money_audio
					+ '&mer_id=' + this.doctorInfo.mer_id,
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.ysxx {
		border-bottom: solid 1rpx #f5f5f5;

		.header {
			margin-top: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #3e3e3e;

			image {
				width: 180rpx;
				height: 180rpx;
				background-color: aqua;
				border-radius: 50%;
				margin-bottom: 10rpx;
			}

			.ysmz {
				font-size: 48rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-weight: 600;
			}

			.ysxx-gzys {
				background-color: #36cf89;
				color: #fff;
				border-radius: 20rpx;
				text-align: center;
				padding: 2rpx 10rpx;
				display: flex;
				font-size: 20rpx;
				display: flex;
				align-items: center;

				.iconfont {
					font-size: 20rpx;
					color: #fff661;
					padding-right: 8rpx;
				}
			}

			.header-text1 {
				display: flex;
				justify-content: center;
				align-items: center;

				.expert {
					margin: 0 10rpx;
					padding: 2rpx 10rpx;
					border-radius: 5rpx;
					background-color: #f6f4ff;
					color: #735bf5;
					font-size: 20rpx;
				}
			}

			.header-text2 {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				height: 80rpx;
				line-height: 80rpx;

				.hpl {
					margin-right: 20rpx;

					text {
						padding-left: 5rpx;
						color: #36cf89;
						font-size: 40rpx;
						font-weight: 600;
					}
				}

				.wzl {
					text {
						padding-left: 5rpx;
						color: #36cf89;
						font-size: 40rpx;
						font-weight: 600;
					}
				}
			}
		}

		.ysxx-content {
			color: #999;
			font-size: 26rpx;
			padding: 20rpx 40rpx;
			line-height: 40rpx;

			.c-des {
				margin-bottom: 10rpx;
			}
		}
	}

	.zhpf {
		margin-bottom: 30rpx;

		.title {
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			font-weight: 500;
			padding-left: 30rpx;
			margin-top: 30rpx;
			border-bottom: #f5f5f5 solid 1rpx;
		}

		.xingji {
			padding-top: 10rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			color: #ff6a00;

			.txt {
				margin-left: 10rpx;
				font-size: $yy-title-font;
			}
		}
	}

	.service-content {
		.title {
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			font-weight: 500;
			padding-left: 30rpx;
		}

		.service-zt {
			height: 200rpx;
			display: flex;
			justify-content: center;
			border-top: #f5f5f5 solid 1rpx;
			border-bottom: #f5f5f5 solid 1rpx;
			align-items: center;

			.zxzx {
				border-right: #f5f5f5 solid 1rpx;
				width: 45%;
				height: 200rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				text-align: center;

				.zxzx-img {
					width: 130rpx;
					height: 130rpx;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.zxzx-font {
					display: flex;
					flex-direction: column;
					align-items: flex-start;

					text {
						color: red;
						font-size: 20rpx;
					}
				}

			}

			.twwz {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				width: 45%;
				height: 200rpx;

				.twwz-img {
					width: 130rpx;
					height: 130rpx;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.twwz-font {
					display: flex;
					flex-direction: column;

					text {
						color: red;
						font-size: 20rpx;
					}
				}

			}
		}
	}

	.service-box {
		.title {
			font-size: 28rpx;
			font-weight: 500;
			padding: 20rpx 30rpx;
			border-top: 2rpx solid #eee;
			border-bottom: 2rpx solid #eee;
		}

		.content-box {
			padding: 20rpx 40rpx;

		}
	}
	.safe-height {
		height: 120rpx;
		height: calc(120rpx + constant(safe-area-inset-bottom));
		height: calc(120rpx + env(safe-area-inset-bottom));
	}
	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		
		.btn-box {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 120rpx;
			.btn {
				background-color: $yy-main-col;
				color: #fff;
				padding: 15rpx 80rpx;
				border-radius: 100rpx;
			}
		}
	}
	
	/deep/.uni-data-checklist .checklist-group .checklist-box .checkbox__inner {
		border-radius: 16px !important;
	}
	
	/deep/.uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text {
		color: #323232 !important;
		font-size: 32rpx !important;
	}
	
	/deep/.uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checkbox__inner {
		border-color: $yy-main-col !important;
		background-color: $yy-main-col !important;
	}
	
	/deep/.uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checklist-text {
		color: #323232 !important;
		font-size: 32rpx !important;
	}
</style>
